<template>
  <div class="main">
    <split-pane :default-percent="20" split="vertical">
      <template slot="paneL">
        <div class="table">
          <div class="inner">
            <el-tree
              style="height:97%;"
              :data="organization"
              :props="defaultProps"
              node-key="dptName"
              default-expand-all
              highlight-current
              ref="tree"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
        </div>
      </template>

      <template slot="paneR">
        <el-form class="form" :model="flt" label-width="8rem" ref="fltForm">
          <el-row :gutter="7" class="row">
            <el-col :span="5">
              <el-form-item size="mini" label="用户账号:" prop="usrCode">
                <el-input clearable maxlength="192" v-model="flt.usrCode" size="mini" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item size="mini" label-width="10px">
                <el-button size="mini" type="primary" @click="searchList">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="table">
          <div class="inner" style="padding-left: 10px;" ref="inner">
            <div class="btn">
              <el-button size="mini" type="primary" plain @click="addNew">新增</el-button>
              <el-button size="mini" type="primary" plain @click="edit">编辑</el-button>
              <el-button size="mini" type="primary" plain @click="del">删除</el-button>
              <el-button plain size="mini" type="primary" @click="resetpwd">密码重置</el-button>
            </div>
            <el-table :height="maxHeight" style="width: 100%" :data="userdepartmentList" :highlight-current-row="true" @row-click="rowClick" border :header-cell-style="{
                textAlign: 'center'
              }"
              @row-dblclick="view">
              <el-table-column align="left" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="用户账号" prop="usrCode" sortable></el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="用户名称" prop="usrName" sortable></el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="派车中心" prop="usrDptsName" sortable></el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="角色" prop="usrRlesName" sortable></el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="联系电话" prop="usrCellphone" sortable></el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="邮箱" prop="usrEmail" sortable></el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="状态" prop="usrStatus" sortable>
                <template slot-scope="scope">
                  <span>{{ USR_STATUS[scope.row.usrStatus] }}</span>
                </template>
              </el-table-column>
              <el-table-column align="left" show-overflow-tooltip label="备注" prop="remark" sortable></el-table-column>
            </el-table>

            <el-pagination
              class="pagination"
              small
              background
              ref="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Pagination.currentPage"
              :page-sizes="Pagination.pageSizeList"
              :page-size="Pagination.pageSize"
              :layout="Pagination.layout"
              :total="Pagination.total">
            </el-pagination>
          </div>
        </div>
      </template>
    </split-pane>

    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="showDialog"
      :visible.sync="showDialog"
      :title="operate">
      <v-dialog
        :show="show"
        :dialogmode="operate"
        :disabled="!isEditMode"
        @close="closeEdit"
        @save="saveFltInfo"
        :flt_info="currentFltInfo"
        :options="options"
        >
      </v-dialog>
    </el-dialog>
  </div>
</template>

<script>
import VDialog from './dialog'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
// import isAuth from '@/mixins/buttonAuth'

import {
  checkusersysdepartmentList,
  addusersysdepartmentList,
  editusersysdepartment,
  delusersysdepartment,
  getzuzhiList,
  queryroles,
  // checkdptList,
  resetSysUserpwd
} from '@/request/api'
// import { setTimeout } from 'timers';

export default {
  name: 'router.sysuserdepartment',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      USR_STATUS: {
        Y: '可用',
        N: '不可用'
      },
      flt: {
        usrCode: ''
      },
      userdepartmentList: [],

      isEditMode: true,
      show: true,
      operate: '',
      showDialog: false,
      showSeeDialog: false,

      currentRow: {},
      currentFltInfo: {},

      roleStatus: [],
      treeHeight: 0,
      //选中行数据
      selectData:[],

      data2: [],

      options: [],

      defaultProps: {
        children: 'departments',
        label: 'dptName'
      },
      maxHeight: -1,
      dptId: ''
    }
  },
  computed: {
    organization() {
      return this.data2.map( item => {
        item['dptName']  = item.fltName
        return item
      })
    }

  },
  methods: {
    //密码重置
    resetpwd(){
      var {uuid,version} =this.currentRow
      if(this.currentRow.length!=0){
        resetSysUserpwd({uuid,version}).then(res=>{
          // console.log(res);
          if(res.success=='1'){
            this.$alert('密码重置成功！重置为Abc12345','提示',{
              confirmButtonText: '确定'
            })
            this.currentRow=''
          }else{
            this.$alert('密码重置失败！请稍后再试','提示',{
              confirmButtonText: '确定'
            })
            this.currentRow=''
          }
          this.refreshList()
        })
      }else{
        this.$alert('请选择需要重置密码的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
    },
    // 重写的获取列表数据的方法
    getList(PageIndexs, PageSizes, updateTotal) {
      this.clearState()
      checkusersysdepartmentList({
        usrCode: this.flt.usrCode,
        dptId: this.dptId,
        PageIndexs,
        PageSizes,
      }).then(res => {
        this.userdepartmentList = res.data.FTKJWLHYPT
        updateTotal(res.data.total.FTKJWLHYPT)
      })
    },
    addNew() {
      this.show = true
      this.operate = this.DIALOG_MODE.ADD
      this.isEditMode = true
      this.currentFltInfo = {
        // 派车中心名称
        usrDptsName: '',
        // 角色
        usrRles: []
      }
      this.showDialog = true
    },
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.show = false
      this.operate = this.DIALOG_MODE.EDIT
      this.isEditMode = true
      this.currentFltInfo = Object.assign({}, this.currentRow)
      console.log(this.currentFltInfo.usrRles)
      // 字符串转数组
      if (this.currentFltInfo.usrRles) {
        this.currentFltInfo.usrRles = this.currentFltInfo.usrRles.split(',')
      }
      this.showDialog = true
    },
    view (row) {
      this.operate = this.DIALOG_MODE.VIEW
      this.isEditMode = false
      this.currentFltInfo = Object.assign({}, row)
      // 字符串转数组
      if (this.currentFltInfo.usrRles) {
        this.currentFltInfo.usrRles = this.currentFltInfo.usrRles.split(',')
      }
      this.showDialog = true
    },
    // 查看用户dialog
    see () {
      this.operate = this.DIALOG_MODE.SEE
      this.isEditMode1 = true
      this.showSeeDialog = true
      this.currentFltInfo = Object.assign({}, this.currentRow)
      this.showDialog = false
    },
    closeEdit() {
      this.showDialog = false,
      this.showSeeDialog = false
    },
    saveFltInfo(info) {
      // console.log(info,3333)
      switch(this.operate) {
      case this.DIALOG_MODE.ADD:
        addusersysdepartmentList(info).then(() => {
          console.log(info,2222)
          this.$message({
            message: '新增成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      case this.DIALOG_MODE.EDIT:

        editusersysdepartment(info).then(() => {
          this.$message({
            message: '编辑成功！',
            type: 'success',
            showClose: true
          })
          this.showDialog = false
          this.refreshList()
        })
        break
      default:
        break
      }
    },
    rowClick(row) { this.currentRow = row },
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        let leta = {}
        leta['uuid'] = this.currentRow.uuid
        leta['version'] = this.currentRow.version
        delusersysdepartment(leta).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true
          })
          this.refreshList()
        })
      })
    },
    clearState() {
      this.currentRow = {}
      this.currentFltInfo = {}
    },
    // 组织机构
    getzuzhi() {
      getzuzhiList().then(res=>{
        this.data2 = res.data.FTKJWLHYPT
      })
    },
    getdata(){
      this.getList(this.Pagination.currentPage, this.Pagination.pageSize, this.updatePaginationTotal)
    },
    // 树点击
    handleNodeClick(data) {
      this.dptId = data.dptId
      this.getdata()
    },
    // 获取角色列表
    getroles () {
      queryroles().then(res=>{
        this.options = res.data.FTKJWLHYPT
      })
    },
  },
  components: {
    VDialog
  },
  mounted() {
    this.searchList()
  },
  created() {
    this.getzuzhi()
    this.getroles()
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight - 99
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding: 1.5rem;
  height:100%;
}
.btn{
  padding-left: 5px;
  padding-bottom: 5px;
}
.user{
  flex:1;
  position:relative;
  box-sizing: border-box;
}
.block{
  padding-right:15px;
  padding-bottom:5px;
}
.table {
  flex: 1;
  position: relative;
  overflow: hidden;
  height: 100%;
  .inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}


</style>
